<script src="${rc.getContextPath()}/manage/js/echarts/echarts.js" type="text/javascript"></script>
<link href="${rc.getContextPath()}/manage/css/dwzCustomCss/dwz.custom.css?v=${ver}" rel="stylesheet" type="text/css">
<script src="${rc.getContextPath()}/manage/js/dwzCustomJs/dwz.custom.hidequery.js" type="text/javascript" ></script>
<#include "/common/pagerForm.html">

<style>

.leftBar .j-first {
    display: none;
}

.leftBar .j-num {
    display: none;
}

.leftBar .j-last {
    display: none;
}

.leftBar .jumpto {
    display: none;
}
.leftTable{
    border: none;
    float: left;
    display: block;
    overflow: auto;
    width: 400px;
    background: #fff;
}

.rightChart {
    margin-left: 400px;
        border-color: #d8dfe5;
    border-style: solid;
    border-width: 1px 0 0 0;
}

.custom{
    border-color: #d8dfe5;
    border-style: solid;
    border-width: 0 1px 0 0;
}

.lineDiv{
    margin:0 auto;
    height:300px;
    overflow:hidden;
}

#panel .panelHeader{
    border-left:0px;
}

</style>
<form rel="pagerForm" method="post" action="" class="required-validate" onsubmit="return navTabSearch(this)" >
    <div class="pageHeader">
        <div class="searchBar" >
            <ul class="searchContent">
                <li class="notnormal">
                    <!-- <label ><@label key="workCenterCode.C,colon">工作中心编号:</@label></label> 
                    <input id="workCenterGrp.workCenterCode" name="workCenterCode" type="text"  suggestFields="workCenterCode,workCenterText" postField="workCenterCode" 
                    suggestUrl="${rc.getContextPath()}/manage/workCenter/workCenterSuggest" lookupGroup="workCenterGrp" autocomplete="off"  value="${page.workCenterCode!''}"/> -->
                    <label><@label key='workCenter.C,colon'>工作中心：</@label></label>
                    <input name="workCenterCode" id="workCenter.code" value="${page.workCenterCode!''}" type="hidden"/>
                    <input class="notreadonly required look" name="workcenterText" id="workCenter.name" type="text" value="${page.workcenterText!''}" readonly/>
                    <a class="btnLook" href="${rc.getContextPath()}/manage/workCenter/workCenterLookup?hr=hr" lookupGroup="workCenter"><@label key="selected_first.C">请选择</@label></a>    
                </li>
                
                <li>
                    <label><@label key='materialCode.C,colon'>物料编号：</@label></label>
                    <input id="materialLookup.materialCode" name="materialCode" type="text" postField="materialCode" suggestFields="materialCode,materialText" 
                    class="alphanumeric"
                        suggestUrl="${rc.getContextPath()}/manage/material/componentSuggest" lookupGroup="materialLookup" 
                        value="${page.materialCode!''}"/>
                </li>
            </ul>
            <ul class="searchContent">
                <li>
                    <label>
                        <@label key='date.C,colon'>日期从：</@label>
                    </label>
                    <input type="text" class="date required" readonly="readonly"  max_Date="{maxCreateDateTime}"  
                    name="minCreateDateTime" value="${page.minCreateDateTime!''}" />
                    <a class="inputDateButton" href="javascript:;">选择</a>
                </li>
                <li>
                    <label>
                        <@label key="to.C,colon">到：</@label>
                    </label>
                    <input type="text" class="date required" readonly="readonly"  min_Date="{minCreateDateTime}" 
                    name="maxCreateDateTime"  value="${page.maxCreateDateTime!''}" />
                    <a class="inputDateButton" href="javascript:;">选择</a>
                </li>
                <li class="query">
                    <div class="buttonActive">
                        <div class="buttonContent">
                            <button onclick="return validateTime()" type="submit">
                                <@label key='query.B'>查询</@label>
                            </button>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</form>

        <div class="leftTable" layoutH="75">
            <table id="iTable" class="table border" layoutH="134" style="float:left;margin:5px;padding:0;border-width:0; width:99%;overflow:auto;"  >
                    <thead>
                        <tr>
                            <th width="40"><@label key="serialNumber.C">序号</@label></th>
                            <th width="110" field="theDate" ><@label key="date.C">日期</@label></th>
                            <th width="120" field="shiftingWorkcenterText" <#if (page.orderField?? && page.orderField == 'shiftingWorkcenterText')>class="${page.orderDirection!''}"</#if>><@label key="workCenter.C">工作中心</@label></th>
                            <th width="150" field="ratio" <#if (page.orderField?? && page.orderField == 'ratio')>class="${page.orderDirection!''}"</#if>><@label key="inOutRatio.C">投入产出比</@label></th>
                        </tr>
                    </thead>
                    <tbody>
                        <#if page??><#if (page.data?size>0)> <#list page.data as report>
                        <tr>
                            <td>${report_index+1}</td>
                            <td>${report.theDate}</td>
                            <td>${report.workcenterText!''}</td>
                            <td>${report.ratio!''}</td>
                        </tr>
                        </#list> <#else>
                            <tr >
                            <td colspan="7"  class="noData">======<@label key="noListData.C">列表无数据</@label>=====
                            </td>
                        </tr>
                        </#if> <#else>
                        <tr >
                            <td colspan="7"  class="noData">======<@label key="noListData.C">列表无数据</@label>=====
                            </td>
                        </tr>
                        </#if>
                    </tbody>
                </table>
            <div class="panelBar leftBar custom">
                <#if page??>
                <div class="pages">
                    <span><@label key="pagePanelShow.C">显示</@label></span> <select class="combox" name="numPerPage" onchange="navTabPageBreak({numPerPage:this.value})"> <#list [10,20,30,50,100,200] as page_size> <#if (page.numPerPage)==page_size>
                        <option value="${page_size}" selected="selected">${page_size}</option> <#else>
                        <option value="${page_size}">${page_size}</option> </#if> </#list>
                    </select> <span><@label key="pagePanelMiddle.C">共</@label></span><span> <#if page.totalCount??>${page.totalCount?c}<@label key="item.C">条</@label></span></#if>
                </div>
                <div class="pagination" targetType="navTab" totalCount="<#if page.totalCount??>${page.totalCount?c}</#if>" numPerPage="<#if page.numPerPage??>${page.numPerPage?c}</#if>" pageNumShown="5" currentPage="<#if page.pageNum??>${page.pageNum?c}</#if>"></div>
                </#if>
            </div>
        </div>
        <div class="rightChart" layoutH="79">
            <div id="defectLevelLine" class="lineDiv">
            </div>
        </div>

<script>
Date.prototype.format=function (){
    var s='';
    s+=this.getFullYear()+'-';// 获取年份。
    s+=(this.getMonth()+1)+"-";         // 获取月份。
    s+= this.getDate();                 // 获取日。
    return(s);                          // 返回日期。
    };

$(function(){
      //保存表单数据
      var $navTab=navTab.getCurrentPanel();
      var formData=$("form",$navTab).serializeArray();
        
        var showLineByType=function(type,option,chart){
            $.DWZajax({
                url:"${rc.getContextPath()}/manage/hr_workCenterPerformance/performanceDataForLine?",
                data:formData,
                callback:function (data)
                {
                    var chartData=data;
                     var textArray= chartData.textArray;
                    var dataArray=chartData.dataArray; 
                    var dateArray=chartData.dateArray; 
                    
                    option.title.text = "<@label key='workCenter.C,inOutRatio.C'>工作中心投入产出比</@label>";
                     var series=[];
                    var seriesData=[];
                    for(var i=0;i<dataArray.length;i++)
                    {
                        var size=dataArray[i].length;
                        seriesData[i]=[];
                        for(var j=0;j<size;j++)
                        {
                            seriesData[i].push(dataArray[i][j]);
                        }
                        option.series.push({data:seriesData[i],name:textArray[i],type:"line"});
                    } 
                    option.legend.data = textArray;  
                    option.xAxis[0].data = dateArray;  
                     if(textArray.length===0)
                    {
                         //显示 无数据loading
                        option.series=[];
                        option.series.push({data:[],type:'line'});
                    }
                    chart.setOption(option,true);
                    //清空option数据
                    option.series=[];
                    
                }
            });
        };
        
        
    
var lineOption = {
        title : {
            text: '',
            x: 'center'
        },
        animation:false,
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            orient : 'horizontal',
            x:'center',
            y:'bottom',
            itemHeight:8,
            data:[]
        },
       
        calculable : false,
        xAxis : [
            {
                type : 'category',
                boundaryGap : true,
                data : []
            }
        ],
        yAxis : [
            {
                type : 'value',
            }
        ],
        series : [
        ],
        
        noDataLoadingOption:{
            text :"<@label key='noData.C'>暂无数据</@label>",
            effect : 'whirling',
                effectOption:{
                   backgroundColor:"#fff",
            }
        }
    };
           
require.config({
     paths : {
            echarts : '${rc.getContextPath()}/manage/js/echarts'
        }
   });
var pic=require(
       [
           'echarts',
           'echarts/chart/line',   // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
           'echarts/chart/pie'
       ],
       function (ec) {
           var color1=[
                              '#d97a80','#2ec8ca','#b6a2df','#5bb0f0',
                            '#ffb880','#7ad8bf','#7a9dd8','#1380ce',
                            '#d89b7a','#dea2ad'
                       ];
           var color2=[
                            '#00acc6','#4f93b6','#85a959','#fba565',
                            '#00aee3','#0084c6','#fe8463','#9bca63',
                            '#fad860','#60c0dd',
                   ];
           var color3=[
                            '#f6a248','#1dcad1','#1ea1e4','#54ad45',
                            '#dd7082','#68c359','#3a8db7','#e29039',
                            '#50ced3','#f49cab',    
                   ];
           //拷贝option并设置颜色主题
           function newOption(optionCopyBy,colorTheme){
               var option={};
               $.extend(true,option,optionCopyBy);
               option.color=colorTheme;
               return option;
           };
           
           var $navTab=navTab.getCurrentPanel();
           
           //折线图
           var defectLevelLine = ec.init($('#defectLevelLine',$navTab)[0]);
           lineOption.color=color1;
           showLineByType("defectLevel",newOption(lineOption,color1),defectLevelLine,formData);
       });
});

</script>

<script>
    function addDate(dd,dadd){
        var a = new Date(dd)
        a = a.valueOf()
        a = a + dadd * 24 * 60 * 60 * 1000
        a = new Date(a)
        return a;
    }
    $(function(){
        var $navTab=navTab.getCurrentPanel();
         var $form=$("form",$navTab);
         
        $("input[name='minCreateDateTime']", $navTab).change(function(){
             $("input[name='minCreateDateTime']", $navTab).val($(this).val())
         })

         $("input[name='maxCreateDateTime']", $navTab).change(function(){
             $("input[name='maxCreateDateTime']", $navTab).val($(this).val())
         })

    })
     
      
     function validateTime(){
         var $navTab=navTab.getCurrentPanel();
         var $form=$("form",$navTab);
         if($("#workCenter\\.code").val().split(",").length > 10){
             alertMsg.warn("<@label key='workCenterCountLimit.M'>同时比较的工作中心数量不能大于10！</@label>");
             return false;
         }
         
        var max_maxDate = addDate($("input[name='minCreateDateTime']",$form).val(), 31)
         if(max_maxDate < new Date($("input[name='maxCreateDateTime']",$form).val())){
             alertMsg.warn("<@label key='beginEndDateLimit.C,31.C,day.C'>开始结束时间跨度不能大于31日！</@label>");
             return false;
         }else{
             return true;
         }
    }
</script>

